<template>
	<view class="transfer-history-wrapper" @click="selectListHide=true">
		<u-tabs :list="tabsList" :is-scroll="false" :current="tabsCurrent" @change="tabsChange"></u-tabs>
		<div class="list-all">
			<div class="money">转出：{{outMoney|formatWalletTwo}}</div>
		</div>
		<view v-if="transferList===''">
			<u-loadmore bg-color="transparent" status="loading" />
		</view>
		<view v-else-if="transferList.length===0">
			<u-loadmore bg-color="transparent" status="nomore" />
		</view>
		<div v-else class="list-wrapper">
			<div class="list-item" v-for="(item,index) in transferList">
				<div class="left">
					<div class="time">{{item.paymentTime}}</div>
					<div class="shouxufei">手续费：{{item.commission|formatWalletTwo}}</div>
					<div class="sn">流水号：{{item.sn}}</div>
				</div>
				<div class="right">
					<div class="money" :class="{'in':item.type==='转入','out':item.type==='转出'}">
						{{item.transferMoneyStr|formatWalletTwo}}
					</div>
					<div class="type">{{item.type}}</div>
				</div>
			</div>
			<u-loadmore bg-color="transparent" :status="loadingState" />
		</div>
	</view>
</template>

<script>
	import {
		TransferMoneyAll,
		TransferList
	} from "@/api/members.js"
	import storage from "@/utils/storage.js";
	const WalletType = {
		'销售钱包': 'SALE',
		'推广钱包-服务费': 'PROMOTE_FW',
		'推广钱包-会员费': 'PROMOTE_HY',
		'推广钱包': 'PROMOTE',
	}
	export default {
		name: "transfer-history",
		data() {
			return {
				outMoney: 0, // 转出总金额
				tabsList: [],
				tabsCurrent: 0,
				selectList: [{
						name: '转入',
						type: 'in'
					},
					{
						name: '转出',
						type: 'out'
					},
					{
						name: '全部',
						type: 'all'
					}
				],
				selectCurrent: 2,
				selectListHide: true,
				transferList: '',
				loadingState: 'loading'
			}
		},
		onLoad() {
			this.initWallet()
			this.pageNumber = 1
			this.pageSize = 10
			this.initMoney()
		},
		// 滚动加载监听事件
		onReachBottom() {},
		methods: {
			initParams() {
				this.pageNumber = 1
				this.pageSize = 10
				this.transferList = ''
				this.loadingState = 'loading'
				this.initList()
			},
			initWallet() {
				this.userInfo = this.$options.filters.isLogin();
				let userinfo = storage.getUserInfo()
				this.partnerType = userinfo.partnerType
				this.haveStore = userinfo.haveStore
				let walletList = []
				if (this.haveStore) {
					walletList.push({
						name: '销售钱包',
					})
				}
				if (this.partnerType === 4 || this.partnerType === 4) {
					walletList.push({
						name: '推广钱包-服务费',
					})
					walletList.push({
						name: '推广钱包-会员费',
					})
				} else if (this.partnerType === 1 || this.partnerType === 2) {
					walletList.push({
						name: '推广钱包',
					})
				}
				this.tabsList = this.tabsList.concat(walletList)
				this.initList()
			},
			tabsChange(index) {
				this.tabsCurrent = index;
				this.initParams()
				this.initMoney()
			},
			selectType(index) {
				this.selectCurrent = index
				this.selectListHide = true
				this.initParams()
			},
			initMoney() {
				TransferMoneyAll({
					owner: WalletType[this.tabsList[this.tabsCurrent].name],
				}).then((res) => {
					this.outMoney = res.data.result.outMoney || 0
				})
			},
			initList() {
				TransferList({
					pageNumber: this.pageNumber,
					pageSize: this.pageSize,
					owner: WalletType[this.tabsList[this.tabsCurrent].name],
					type: this.selectList[this.selectCurrent].type
				}).then((res) => {
					let list = res.data.result.records
					if (this.transferList === '') {
						this.transferList = list
					} else {
						this.transferList = this.transferList.concat(list)
					}
					if (list.length < this.pageSize) {
						this.loadingState = 'nomore'
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.transfer-history-wrapper {
		min-height: 100vh;

		.list-all {
			padding: 0 32upx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100upx;

			.select-type-wrapper {
				position: relative;

				.selected-option {
					display: flex;
					justify-content: space-around;
					align-items: center;
					width: 200upx;
					height: 64upx;
					border: 2upx solid #dddddd;
					border-radius: 8upx;
					background-color: #ffffff;
				}

				.select-list {
					position: absolute;
					top: 62upx;
					right: 0;
					width: 200upx;
					height: 200upx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					text-align: center;
					background-color: #ffffff;
					border: 2upx solid #dddddd;
					overflow: hidden;
					box-sizing: border-box;
					opacity: 1;
					transition: height 0.3s;

					&.hide {
						height: 0;
						opacity: 0;
					}

					.select-item {
						height: 60upx;
						line-height: 60upx;
						width: 200upx;

						&.selected {
							color: rgb(0, 162, 255);
						}
					}
				}
			}
		}

		.list-wrapper {
			.list-item {
				margin-bottom: 24upx;
				padding: 24upx 32upx;
				background-color: #ffffff;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {}

				.right {
					text-align: right;

					.money {
						font-size: 32upx;
						font-weight: bold;

						&.in {
							color: #FF6200;
						}

						&.out {
							color: #00a2ff;
						}
					}

					.type {
						margin-top: 8upx;
						font-size: 28upx;
						color: #999999;
					}
				}
			}
		}
	}
</style>
